<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 除了引入本地的依赖，还可以引入在线的cdn依赖 -->
    <!-- openlayer的样式依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/openlayers/4.6.5/ol.css">
    <!-- openlayer的js依赖 -->
    <script src="https://lib.baomitu.com/openlayers/4.6.5/ol.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        // target view layers
        new ol.Map({ // openlayer Map首字母大写,leaflet map首字母小写
            // 设置地图图层
            layers: [
                // 创建一个使用Open Street Map地图源的瓦片图层
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url
                    })
                })
            ],
            // 设置显示地图的视图
            view: new ol.View({
                center: [0,0],    // 定义地图显示中心于经度0度，纬度0度处
                zoom: 1,
                projection: 'EPSG:4326',           // 并且定义地图显示层级为2
            }),
            // 让id为map的div作为地图的容器
            target: 'map'
        });
    </script>
</body>

</html>